<template>
  <div>
    <Row>
      <i-col>
        <Form ref="tabParam" :model="tabParam" label-position="right" inline>
          <FormItem>
            <Button type="primary" @click="exportDataInventory">
              <Icon type="ios-download-outline"></Icon>
              导出原始数据
            </Button>
          </FormItem>
          <FormItem label="派单时间：">
            <DatePicker v-model="timeSlot.timeVal" type="daterange" :options="timeSlot.timeOptions" split-panels
                        placeholder="绑箱时间" format="yyyy年MM月dd日" style="width: 230px">
            </DatePicker>
          </FormItem>
          <FormItem label="运单状态">
            <Select v-model="tabParam.isComplate" filterable placeholder="选择运单状态" style="width: 200px">
              <Option v-for="item in orderStatues" :value="item.val" :key="item.val">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch" icon="ios-search">
              搜索
            </Button>
          </FormItem>
        </Form>
        <tablePage ref="orderReportNewTab" :api="orderLiquidationDataForFleet" :param="tabParam">
          <template slot-scope="props">
            <Table :columns="containerColumn" :data="props.data"></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import noLoadContainers from './components/noLoadContainers'
  import tablePage from '@components/table/tablePage.vue'
  import {orderLiquidationDataForFleet} from '@api/backEnd/report'
  // import { getAddressList, getOwnFleet } from '@api/backEnd/station'
  import {getAddressList} from '@api/backEnd/station'
  import {exportUtil} from '@/vendor/exportInvoke'
  import moment from 'moment'
  import {mapGetters} from 'vuex'

  export default {
    name: '',
    data () {
      let addressList = []
      let timeTypes = {
        startTime: 0,
        endTime: 1
      }
      let containerStatues = [
        {label: '重箱出场', val: '1'},
        {label: '非重箱出场', val: '0'}
      ]
      /* let orderStatues = [
       {label: '入线预报', val: '1'},
       {label: '出线预报', val: '2'},
       {label: '待发运', val: '3'},
       {label: '运输中', val: '4'},
       {label: '派送中', val: '5'},
       {label: '已完成', val: '6'}
       ] */
      let orderStatues = [
        {label: '全部', val: '0'},
        {label: '未完成', val: '1'},
        {label: '完成', val: '2'}
      ]
      let timeSlot = {
        timeOptions: {
          shortcuts: [
            {
              text: '最近一周 ',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三个月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        },
        timeVal: []
      }
      let tabParam = {
        dispatchTimeStart: timeSlot.timeVal[0],
        dispatchTimeEnd: timeSlot.timeVal[1],
        fleetId: '',
        isComplate: '0'
      }
      let containerColumn = [
        {
          title: '联运单号',
          key: 'mainOrderNo',
          ellipsis: 'false',
          fixed: 'left',
          width: 200
        },
        {
          title: '子单号',
          ellipsis: 'false',
          key: 'subOrderId',
          width: 200
        },
        {
          title: '货票号',
          ellipsis: 'false',
          key: 'waybillNo',
          width: 100
        },
        {
          title: '集装箱号',
          ellipsis: 'false',
          key: 'containerNo',
          width: 150
        },
        {
          title: '发货人',
          ellipsis: 'false',
          key: 'shipper',
          width: 250
        },
        {
          title: '收货人',
          ellipsis: 'false',
          key: 'receiver',
          width: 250
        },
        {
          title: '货物名称',
          ellipsis: 'false',
          key: 'pm',
          width: 100
        },
        {
          title: '发站',
          ellipsis: 'false',
          key: 'startStationName',
          width: 100
        },
        {
          title: '到站',
          ellipsis: 'false',
          key: 'endStationName',
          width: 100
        },
        {
          title: '派单时间',
          ellipsis: 'false',
          key: 'fleetOrderCreateTime',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.fleetOrderCreateTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '子运单状态',
          ellipsis: 'false',
          key: 'state',
          width: 150,
          render: (h, params) => {
            let item = params.row
            let txt = ''
            let color = ''
            if (item.state === 1) {
              txt = '正常'
              color = 'blue'
            } else if (item.state === 2) {
              txt = '已派单'
              color = 'yellow'
            } else if (item.state === 3) {
              txt = '指定派单'
              color = 'yellow'
            } else if (item.state === 4) {
              txt = '司机已绑定'
              color = 'yellow'
            } else if (item.state === 5) {
              txt = '门卫确认'
              color = 'green'
            } else if (item.state === 6) {
              txt = '完成'
              color = 'green'
            } else if (item.state === 99) {
              txt = '作废'
              color = 'red'
            }
            return (<tag type="dot" color={color}>{txt}</tag>)
          }
        },
        {
          title: '绑箱类型',
          ellipsis: 'false',
          key: 'autoType',
          width: 150,
          render: (h, params) => {
            let item = params.row
            let txt = ''
            if (item.autoType === 1) {
              txt = 'SETC绑箱'
            } else if (item.autoType === 2) {
              txt = '司机绑箱'
            }
            return (<span>{txt}</span>)
          }
        },
        {
          title: '绑箱时间',
          ellipsis: 'false',
          key: 'bindTime',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.bindTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '司机名称',
          ellipsis: 'false',
          key: 'driverName',
          width: 100
        },
        {
          title: '车牌号',
          ellipsis: 'false',
          key: 'truckPlate',
          width: 100
        },
        {
          title: '送货地址',
          ellipsis: 'false',
          key: 'outAddress',
          width: 100
        },
        {
          title: '接取费（元）',
          ellipsis: 'false',
          key: 'receiveFee',
          width: 100
        },
        {
          title: '送达费（元）',
          ellipsis: 'false',
          key: 'deliverFee',
          width: 100
        },
        {
          title: '业务类型',
          ellipsis: 'false',
          key: 'transportType',
          width: 100,
          render: (h, params) => {
            let thisdata = ''
            if (params.row.transportType === 1) {
              thisdata = '门到门'
            } else if (params.row.transportType === 2) {
              thisdata = '门到站'
            } else if (params.row.transportType === 3) {
              thisdata = '站到门'
            } else if (params.row.transportType === 4) {
              thisdata = '站到站'
            }
            return (<span>{thisdata}</span>)
          }
        }
      ]
      let datas = {
        tabParam,
        containerColumn,
        orderLiquidationDataForFleet,
        containerStatues,
        timeTypes,
        timeSlot,
        addressList,
        orderStatues
      }
      return datas
    },
    methods: {
      handleSearch (param) {
        this.$refs['orderReportNewTab'].dataRefresh()
      },
      exportDataInventory () {
        let param = Object.assign({}, this.tabParam)
        param.page = 1
        param.pageSize = 100000
        orderLiquidationDataForFleet(param).then(res => {
          if (res.data.isSuccess === 1) {
            let resDate = res.data.data.rows
            // let resColumns = JSON.parse(JSON.stringify(this.stationColumn))
            let result = this.fasetJson(resDate)
            exportUtil.export2Excel('车队报表', result.columns, result.data)
          }
        })
      },
      fasetJson (tabData) {
        let result = {
          columns: [
            {title: '联运单号', key: 'mainOrderNo'},
            {title: '子单号', key: 'subOrderId'},
            {title: '货票号', key: 'waybillNo'},
            {title: '集装箱号', key: 'containerNo'},
            {title: '发货人', key: 'shipper'},
            {title: '收货人', key: 'receiver'},
            {title: '货物名称', key: 'pm'},
            {title: '发站', key: 'startStationName'},
            {title: '到站', key: 'endStationName'},
            {title: '派单时间', key: 'fleetOrderCreateTime'},
            {title: '子运单状态', key: 'status'},
            {title: '绑箱类型', key: 'autoType'},
            {title: '绑箱时间', key: 'bindTime'},
            {title: '司机名称', key: 'driverName'},
            {title: '送货地址', key: 'outAddress'},
            {title: '接取费（元）', key: 'receiveFee'},
            {title: '送达费（元）', key: 'deliverFee'},
            {title: '业务类型', key: 'transportType'}
          ],
          data: []
        }
        let indexCount = 0
        tabData.forEach((item) => {
          if (item.state === 1) {
            item.status = '正常'
          } else if (item.state === 2) {
            item.status = '已派单'
          } else if (item.state === 3) {
            item.status = '指定派单'
          } else if (item.state === 4) {
            item.status = '司机已绑定'
          } else if (item.state === 5) {
            item.status = '完成'
          } else if (item.state === 99) {
            item.status = '作废'
          }
          if (item.autoType === 1) {
            item.autoType = 'SETC绑箱'
          } else if (item.autoType === 2) {
            item.autoType = '司机绑箱'
          }
          if (item.transportType === 1) {
            item.transportType = '门到门'
          } else if (item.transportType === 2) {
            item.transportType = '门到站'
          } else if (item.transportType === 3) {
            item.transportType = '站到门'
          } else if (item.transportType === 4) {
            item.transportType = '站到站'
          }
          let dataItem = {
            fleetOrderId: item.fleetOrderId,
            subOrderId: item.subOrderId,
            waybillNo: item.waybillNo,
            containerNo: item.containerNo,
            shipper: item.shipper,
            receiver: item.receiver,
            pm: item.pm,
            startStationName: item.startStationName,
            endStationName: item.endStationName,
            fleetOrderCreateTime: item.fleetOrderCreateTime,
            status: item.status,
            autoType: item.autoType,
            bindTime: item.bindTime,
            driverName: item.driverName,
            outAddress: item.outAddress,
            receiveFee: item.receiveFee,
            deliverFee: item.deliverFee,
            transportType: item.transportType
          }
          result.data.push(dataItem)
          indexCount++
        })
        console.log(indexCount)
        return result
      }
    },
    watch: {
      /* tabParam: {
       handler: function (val, oldVal) {
       this.$refs['orderReportNewTab'].dataRefresh()
       },
       deep: true
       }, */
      'timeSlot.timeVal': function (val, oldval) {
        if (val && val[0] && val[1]) {
          this.tabParam.dispatchTimeStart = moment(val[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.tabParam.dispatchTimeEnd = moment(val[1]).format('YYYY-MM-DD') + ' 23:59:59'
        } else {
          delete this.tabParam.dispatchTimeStart
          delete this.tabParam.dispatchTimeEnd
        }
        // this.$refs['orderReportNewTab'].dataRefresh()
      }
    },
    computed: {
      ...mapGetters(['currentUser', 'activeMenu'])
    },
    mounted () {
      getAddressList().then(res => {
        if (res.data.isSuccess === 1) {
          this.addressList = res.data.data
        }
      })
    },
    components: {tablePage, noLoadContainers},
    created () {
      this.tabParam.fleetId = this.currentUser.userId
    }
  }
</script>
<style scoped>
  .lh-32 {
    line-height: 32px;
    margin-right: 5px;
  }
</style>
